<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="@{/}" target="_self" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>后台管理 | 登录</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
<!-- Font Awesome -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- Ionicons -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" />
<!-- Theme style -->
<link rel="stylesheet" type="text/css" href="css/theme/theme.min.css" />
<!-- Toastr style -->
<!-- https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css -->
<link rel="stylesheet" type="text/css" href="css/toastr/toastr.css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition login-page">
	<div class="login-box">
		<div class="login-logo">
			<span><b>Ray</b>Boo</span>
		</div>
		<!-- /.login-logo -->
		<div class="login-box-body">
			<p class="login-box-msg">用户登录</p>
			<form role="form" action="/login" method="post" id="main-form">
				<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
				<div class="form-group has-feedback">
					<input type="text" name="username" class="form-control"
						placeholder="请输入用户名" required="required" /> <span
						class="fa fa-user form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" name="password" class="form-control"
						placeholder="请输入密码" required="required" /> <span
						class="fa fa-lock form-control-feedback"></span>
				</div>
				<div class="row">
					<!-- col -->
					<div class="col-xs-offset-8 col-xs-4">
						<button type="submit" class="btn btn-info btn-block btn-flat">登录</button>
					</div>
					<!-- /.col -->
				</div>
			</form>
			<!-- /.login-box-body -->
		</div>
		<!-- /.login-box -->
	</div>
	<!-- jQuery 2.2.3 -->
	<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
	<!-- Bootstrap 3.3.6 -->
	<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
	<!-- Toastr Js -->
	<!-- https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js -->
	<script type="text/javascript" src="js/toastr/toastr.js"></script>
	<!-- login js -->
	<section layout:fragment="js">
		<script th:if="${hasError}">
			$(document).ready(function() {
				toastr.error("用户名或密码错误");
				//alert("用户名或密码错误");
			});
		</script>
		<script th:if="${logout}">
			$(document).ready(function() {
				//alert("您已经退出登录");
			});
		</script>
		<script>
			$(document).ready(function() {
				var formSelector = '#main-form';

				var uname = $(input = '[name="username"]').val();
				var pwd = $(input = '[name="password"]').val();
				$(formSelector).on('submit', function(e) {
					if (uname == null || pwd == null){
						toastr.warning("请填写用户名和密码");
						//alert("请填写用户名和密码");
					}else{
						toastr.success("登录成功，正在跳转...");
					}
				});
			});
		</script>
	</section>
</body>
</html>